import React, {Component} from 'react'
import './home.scss'
import Banner from "./banner";
import List from "./list";

export default class Home extends Component {
    constructor() {
        super();
        this.state = {
            lists: [
                {url: require('../../assets/img/1.jpg'), title: '学习阅读'},
                {url: require('../../assets/img/2.jpg'), title: '学习训练'},
                {url: require('../../assets/img/3.jpg'), title: '学习检查'},
                {url: require('../../assets/img/4.jpg'), title: '学习提高'}
            ]
        }
    };

    render() {
        let {lists} = this.state;
        const imgList = lists.map((item, i) => (
            <li key={i}>
                <img src={item.url}/>
                <p>{item.title}</p>
            </li>
        ));
        return (
            <div>
                <Banner />
                <div className="nav">
                    <ul>
                        {imgList}
                    </ul>
                </div>
                <div>
                    <List/>
                </div>
            </div>
        )
    }
}
